<!--
 * @Author: FengTeng
 * @Date: 2021-02-20 13:57:28
 * @LastEditTime: 2021-03-03 19:28:22
 * @LastEditors: FengTeng
 * @Description: Description
 * @FilePath: \spa-manage\src\components\modal\system-user-detail\SystemUserDetail.vue
-->
<template>
  <div class="system-user-detail" :class="{ 'z-index': !modalConfig.visible }">
    <spa-modal :modalConfig="modalConfig" @dialog-close="handleDialogClose()">
      <el-form :rules="userDetailConfig.rules" ref="userDetailRef" :model="userDetailData">
        <div class="form-title"># 新增用户</div>
        <el-form-item label="姓名：" prop="name">
          <el-input v-model="userDetailData.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="用户名：" prop="username">
          <el-input v-model="userDetailData.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input v-model="userDetailData.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item class="form-option-button">
          <el-button type="info" @click="handleCancel()">取消</el-button>
          <el-button type="primary" :loading="confirmBtnLoading" @click="handleConfirm()">确定</el-button>
        </el-form-item>
      </el-form>
      <div class="permission-form">
        <div class="form-header">权限设置</div>
        <div class="permission-group">
          <el-checkbox
            :indeterminate="permissions.customerPool.isIndeterminate"
            v-model="permissions.customerPool.checkAll"
            @change="customerPoolPmsAllCheckChange($event)"
          >
            客户池
          </el-checkbox>
          <el-checkbox-group v-model="permissions.customerPool.checkedPms" @change="customerPoolPmsChange($event)">
            <el-checkbox
              v-for="customerPoolPermission in pmsConfig.customerPoolPms"
              :label="customerPoolPermission"
              :key="customerPoolPermission"
            >
              {{ customerPoolPermission }}
            </el-checkbox>
          </el-checkbox-group>
          <el-checkbox
            :indeterminate="permissions.memberManage.isIndeterminate"
            v-model="permissions.memberManage.checkAll"
            @change="memberManagePmsAllCheckChange($event)"
          >
            会员管理
          </el-checkbox>
          <el-checkbox-group v-model="permissions.memberManage.checkedPms" @change="memberManagePmsChange($event)">
            <el-checkbox
              v-for="memberManagePermission in pmsConfig.memberManagePms"
              :label="memberManagePermission"
              :key="memberManagePermission"
            >
              {{ memberManagePermission }}
            </el-checkbox>
          </el-checkbox-group>
          <el-checkbox
            :indeterminate="permissions.memberInfo.isIndeterminate"
            v-model="permissions.memberInfo.checkAll"
            @change="memberInfoPmsAllCheckChange($event)"
          >
            会员画像
          </el-checkbox>
          <el-checkbox-group v-model="permissions.memberInfo.checkedPms" @change="memberInfoPmsChange($event)">
            <el-checkbox
              v-for="memberInfoPermission in pmsConfig.memberInfoPms"
              :label="memberInfoPermission"
              :key="memberInfoPermission"
            >
              {{ memberInfoPermission }}
            </el-checkbox>
          </el-checkbox-group>
          <el-checkbox
            :indeterminate="permissions.productsManage.isIndeterminate"
            v-model="permissions.productsManage.checkAll"
            @change="productsManagePmsAllCheckChange($event)"
          >
            商品管理
          </el-checkbox>
          <el-checkbox-group v-model="permissions.productsManage.checkedPms" @change="productsManagePmsChange($event)">
            <el-checkbox
              v-for="productsManagePermission in pmsConfig.productsManagePms"
              :label="productsManagePermission"
              :key="productsManagePermission"
            >
              {{ productsManagePermission }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </spa-modal>
  </div>
</template>

<script>
import $ from "jquery";
import apis from "@/apis/index.js";
import SpaModal from "@/components/spa-modal/SpaModal.vue";
export default {
  name: "SystemUserDetail",
  components: {
    SpaModal
  },
  props: {
    modalConfig: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      userDetailConfig: {
        rules: {
          name: [{ required: true, message: "请输入姓名！", trigger: "blur" }],
          username: [{ required: true, message: "请输入用户名！", trigger: "blur" }],
          password: [{ required: true, message: "请输入密码！", trigger: "blur" }]
        }
      },
      userDetailData: {
        name: "",
        username: "",
        password: ""
      },
      pmsConfig: {
        customerPoolPms: ["页面查看和搜索", "新增客户", "设置跟进人", "设置成交指数", "添加跟进记录", "设置成交商品"],
        memberManagePms: ["页面查看和搜索", "使用服务次数"],
        memberInfoPms: ["页面查看和搜索", "规则建立", "规则上下架"],
        productsManagePms: ["页面查看和搜索", "规则商品", "商品上下架"]
      },
      pmsConfigTran: {
        customerPoolPms: [
          "yemianchakansousuo1",
          "xinzengkehu",
          "shezhigenjinren",
          "shezhichenjiaozhishu",
          "tianjiagenjinjilu",
          "shezhichenjiaoshangping"
        ],
        memberManagePms: ["yemianchakansousuo2", "shiyongfuwuceshu"],
        memberInfoPms: ["yemianchakansousuo3", "guizejianli", "guizeshangjiaxiajia"],
        productsManagePms: ["yemianchakansousuo4", "guizeshangping", "shangpingshangjiaxiajia"]
      },
      permissions: {
        customerPool: {
          checkAll: false,
          isIndeterminate: false,
          checkedPms: []
        },
        memberManage: {
          checkAll: false,
          isIndeterminate: false,
          checkedPms: []
        },
        memberInfo: {
          checkAll: false,
          isIndeterminate: false,
          checkedPms: []
        },
        productsManage: {
          checkAll: false,
          isIndeterminate: false,
          checkedPms: []
        }
      },
      confirmBtnLoading: false,
      userEvent: {}
    };
  },
  methods: {
    openModal(event) {
      debugger
      console.log(event);
      this.userEvent = { ...event };
      if (event.prop === "systemUser") {
        this.userDetailData.name = event.name || "";
        this.userDetailData.username = event.zhanghao || "";
        this.userDetailData.password = event.pwd || "";
      }
      this.modalConfig.visible = true;
    },
    getUserType(event) {
      let role = "";
      switch (event.prop) {
        case "addSaleManage":
          role = 2;
          break;
        case "addSale":
          role = 3;
          break;
        case "addDirector":
          role = 4;
          break;
        default:
          break;
      }
      return role;
    },
    addSystemUser(role) {
      console.log(role);
      this.confirmBtnLoading = true;
      const permissions = this.getCurrentPermissions();
      // 添加用户接口调用
      $.post(
        apis.addNewSystemUser,
        {
          name: this.userDetailData.name,
          zhanghao: this.userDetailData.username,
          pwd: this.userDetailData.password,
          zhiwei_id: role,
          ...permissions,
          type: "insert"
        },
        resp => {
          resp = JSON.parse(resp);
          if (resp.code === "ok") {
            console.log(resp);
            this.$message.success(resp.msg);
            this.modalConfig.visible = false;
            this.resetFormData();
          } else {
            this.$message.error(resp.msg);
          }
          this.confirmBtnLoading = false;
        }
      );
    },
    getPermissionsByApi(permissionList) {
      permissionList.forEach(item => {
        switch (item) {
          case "yemianchakansousuo1":
            break;
          case "xinzengkehu":
            break;
          case "shezhigenjinren":
            break;
          case "shezhichenjiaozhishu":
            break;
          case "tianjiagenjinjilu":
            break;
          case "shezhichenjiaoshangping":
            break;
          case "yemianchakansousuo2":
            break;
          case "shiyongfuwuceshu":
            break;
          case "yemianchakansousuo3":
            break;
          case "guizejianli":
            break;
          case "guizeshangjiaxiajia":
            break;
          case "yemianchakansousuo4":
            break;
          case "guizeshangping":
            break;
          case "shangpingshangjiaxiajia":
            break;
          default:
            break;
        }
      });
    },
    getCurrentPermissions() {
      console.log(this.permissions);
      let permissions = {
        yemianchakansousuo1: false,
        xinzengkehu: false,
        shezhigenjinren: false,
        shezhichenjiaozhishu: false,
        tianjiagenjinjilu: false,
        shezhichenjiaoshangping: false,
        yemianchakansousuo2: false,
        shiyongfuwuceshu: false,
        yemianchakansousuo3: false,
        guizejianli: false,
        guizeshangjiaxiajia: false,
        yemianchakansousuo4: false,
        guizeshangping: false,
        shangpingshangjiaxiajia: false
      };
      this.permissions.customerPool.checkedPms.forEach(item => {
        switch (item) {
          case "页面查看和搜索":
            permissions.yemianchakansousuo1 = true;
            break;
          case "新增客户":
            permissions.xinzengkehu = true;
            break;
          case "设置跟进人":
            permissions.shezhigenjinren = true;
            break;
          case "设置成交指数":
            permissions.shezhichenjiaozhishu = true;
            break;
          case "添加跟进记录":
            permissions.tianjiagenjinjilu = true;
            break;
          case "设置成交商品":
            permissions.shezhichenjiaoshangping = true;
            break;
          default:
            break;
        }
      });
      this.permissions.memberManage.checkedPms.forEach(item => {
        switch (item) {
          case "页面查看和搜索":
            permissions.yemianchakansousuo2 = true;
            break;
          case "使用服务次数":
            permissions.shiyongfuwuceshu = true;
            break;
          default:
            break;
        }
      });
      this.permissions.memberInfo.checkedPms.forEach(item => {
        switch (item) {
          case "页面查看和搜索":
            permissions.yemianchakansousuo1 = true;
            break;
          case "规则建立":
            permissions.guizejianli = true;
            break;
          case "规则上下架":
            permissions.guizeshangjiaxiajia = true;
            break;
          default:
            break;
        }
      });
      this.permissions.productsManage.checkedPms.forEach(item => {
        switch (item) {
          case "页面查看和搜索":
            permissions.yemianchakansousuo4 = true;
            break;
          case "规则商品":
            permissions.guizeshangping = true;
            break;
          case "商品上下架":
            permissions.shangpingshangjiaxiajia = true;
            break;
          default:
            break;
        }
      });
      return permissions;
    },
    customerPoolPmsAllCheckChange(val) {
      this.permissions.customerPool.checkedPms = val ? this.pmsConfig.customerPoolPms : [];
      this.permissions.customerPool.isIndeterminate = false;
      console.log("全选客户池权限");
    },
    memberManagePmsAllCheckChange(val) {
      console.log("全选会员管理权限");
      this.permissions.memberManage.checkedPms = val ? this.pmsConfig.memberManagePms : [];
      this.permissions.memberManage.isIndeterminate = false;
    },
    memberInfoPmsAllCheckChange(val) {
      console.log("全选会员画像权限");
      this.permissions.memberInfo.checkedPms = val ? this.pmsConfig.memberInfoPms : [];
      this.permissions.memberInfo.isIndeterminate = false;
    },
    productsManagePmsAllCheckChange(val) {
      console.log("全选产品管理权限");
      this.permissions.productsManage.checkedPms = val ? this.pmsConfig.productsManagePms : [];
      this.permissions.productsManage.isIndeterminate = false;
    },
    customerPoolPmsChange(value) {
      console.log("选择");
      let checkedCount = value.length;
      this.permissions.customerPool.checkAll = checkedCount === this.pmsConfig.customerPoolPms.length;
      this.permissions.customerPool.isIndeterminate =
        checkedCount > 0 && checkedCount < this.pmsConfig.customerPoolPms.length;
    },
    memberManagePmsChange(value) {
      console.log("选择");
      let checkedCount = value.length;
      this.permissions.memberManage.checkAll = checkedCount === this.pmsConfig.memberManagePms.length;
      this.permissions.memberManage.isIndeterminate =
        checkedCount > 0 && checkedCount < this.pmsConfig.memberManagePms.length;
    },
    memberInfoPmsChange(value) {
      console.log("选择");
      let checkedCount = value.length;
      this.permissions.memberInfo.checkAll = checkedCount === this.pmsConfig.memberInfoPms.length;
      this.permissions.memberInfo.isIndeterminate =
        checkedCount > 0 && checkedCount < this.pmsConfig.memberInfoPms.length;
    },
    productsManagePmsChange(value) {
      console.log("选择");
      let checkedCount = value.length;
      this.permissions.productsManage.checkAll = checkedCount === this.pmsConfig.productsManagePms.length;
      this.permissions.productsManage.isIndeterminate =
        checkedCount > 0 && checkedCount < this.pmsConfig.productsManagePms.length;
    },
    handleConfirm() {
      console.log("提交表单");
      const type = this.getUserType(this.userEvent);
      this.addSystemUser(type);
    },
    handleCancel() {
      console.log("取消");
      this.modalConfig.visible = false;
      this.resetFormData();
    },
    handleDialogClose() {
      this.resetFormData();
    },
    resetFormData() {
      console.log("重置表单");
      this.permissions = {
        customerPool: {
          checkAll: false,
          isIndeterminate: false,
          checkedPms: []
        },
        memberManage: {
          checkAll: false,
          isIndeterminate: false,
          checkedPms: []
        },
        memberInfo: {
          checkAll: false,
          isIndeterminate: false,
          checkedPms: []
        },
        productsManage: {
          checkAll: false,
          isIndeterminate: false,
          checkedPms: []
        }
      };
      this.userDetailData = {
        name: "",
        username: "",
        password: ""
      };
      this.userEvent = {};
      this.confirmBtnLoading = false;
      this.$refs.userDetailRef && this.$refs.userDetailRef.resetFields();
    }
  }
};
</script>

<style lang="scss" src="./index.scss"></style>
